<template>
  <el-dialog title="新增" v-model="dialogVisible" @close="$emit('update:dialogVisible', false)" width=480px>
    <el-form :model="form" size="mini" label-position="right">
      <el-form-item label="类别：" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="请选择类别">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-model="form.title" label="标题：" :label-width="formLabelWidth">
        <el-input placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-form-item v-model="form.name" label="概况：" :label-width="formLabelWidth">
        <el-input type="textarea" placeholder="请输入概况"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="danger" @click="dialogVisible = false">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { reactive, ref } from "vue";

export default {
  name: "NewInfo",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, context) {
    const formLabelWidth = ref('70px')

    const form = reactive({
      title: '',
      region: '',
      resource: '',
      desc: ''
    })

    return { formLabelWidth, form }
  },
};
</script>

<style lang="scss" scoped>
</style>